forum

home / developersection / forums / what is the role of flexbox property in css?

Ask Question

What is the role of flexbox property in CSS?

Anonymous User 314 12-Jul-2021

Describe the role of flexbox property in CSS? Why it is widely used nowadays?

css-css3 css-css3 
Updated on 12-Jul-2021
Anonymous User

Software Developer Trainee

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Ethan Karla

Ethan Karla

13-Jul-2021

Flexbox is also known as CSS Flexible Box. This is the new layout model in CSS3 which helps the website to make it responsive. Flex box helps the website to behave according to the size of the window. It mainly deals with how the elements will be arranged, such as a row, column, justify-content, align-item, align-content, etc.

Let's understand it with the help if an example : 

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>Flexbox | Mindstick</title>

    <style>

        body {

            margin-left: 30%;

            margin-right: 30%

        }

        .bor1 {

            border: 1px solid black;

        }

        .bor2 {

            border: 1px solid red;

        }

        .d-flex {

            display: flex;

        }

        .justify-content-center {

            justify-content: center;

        }

        .m-1 {

            margin: 10px;

        }

        .p-1 {

            padding: 10px;

        }

        .plr-1 {

            padding-left: 10px;

            padding-right: 10px;

        }

        .mlr-1 {

            margin-left: 10px;

            margin-right: 10px;

        }

        .box {

            width: 100px;

            height: 100px;

            border: 1px solid darkblue;

        }

        .flex-row {

            flex-direction: row;

        }

        .flex-column {

            flex-direction: column;

        }

    </style>

</head>

<body class='bor2'> 

    <div class='d-flex flex-row justify-content-center bor1 m-1 p-1'>

       <div class='box mlr-1'></div>

       <div class='box mlr-1'></div>

       <div class='box mlr-1'></div>

       <div class='box mlr-1'></div>

       <div class='box mlr-1'></div>

    </div>

</body>

</html>

Following will  be the output of above code : 

What is the role of flexbox property in CSS?

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy